<template>
  <!-- <router-link :to="{name:'newGroup'}" > 创群1 </router-link> -->
  <div class="top1">
    <div class="box top2">
        <div class="top3">
       <el-container class="home-container">
  <el-aside width="200px" >
      <el-menu
     :default-active="path"
     router
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#cc163a">
      <!-- <el-menu-item :index="'/home/member/'+user.username+'/GroupIndex/home'">首页</el-menu-item> -->
    <el-submenu index="x2"  >
          <template #title>新建组群</template>
          <el-menu-item @click="dialogAdd" >
           <i class="el-icon-circle-plus-outline"></i>
          新建组群
          </el-menu-item>
                  <el-submenu index="x3" >
          <template slot="title"  >我创建的组群</template>

          <!-- <div  v-for="item in groupMenu" :key="item.id">
          <router-link :to="{name:'newGroup', params: {id: item.groupId, datads:item}} " >
          <el-menu-item :index="item.id" @click="routerTo(item.groupId)">
            {{item.groupMenu}}
          </el-menu-item> -->

        <el-menu-item  v-for="item in groupMenu" :key="item.id"
        :index="'/home/member/'+user.username + '/GroupIndex/set'+item.group_id" >
            {{item.group_menu}}
          </el-menu-item>
           <!-- </div> -->
        </el-submenu>
      </el-submenu>
    <el-submenu index="2">
          <template #title>加入组群</template>
           <el-menu-item   @click="dialogJoin">
            <i class="el-icon-circle-plus-outline"></i>
           加入组群</el-menu-item>
           <el-submenu index="2-4">
          <template slot="title">我加入的组群</template>

            <!-- <router-link :to="{name:'newGroup2'}" >
              <el-menu-item index="001" >创群2 </el-menu-item>
            </router-link> -->

        <el-menu-item  v-for="Joinitem in groupData" :key="Joinitem.id"
           :index="'/home/member/'+user.username + '/GroupIndex/join'+Joinitem.groupId" >
           {{Joinitem.groupMenu}}
        </el-menu-item>

        </el-submenu>
      </el-submenu>
    </el-menu></el-aside>
  <el-main class="Amain">
    <div style="width:200px; height:200px; backgroundColor:red;">
      首页
    </div>
  </el-main>
</el-container>

<el-dialog :visible.sync="dialogVisible1"  title="增加组群" width="20%">
     <el-form :model="form" label-width="80px"
      ref="ruleGroupForm"   :rules="rules">
       <el-form-item label="组长">
         <el-input v-model="form.groupLeader" disabled></el-input>
       </el-form-item>
       <el-form-item label="群id编号"  prop="groupId">
         <el-input v-model="form.groupId"></el-input>
       </el-form-item>
           <el-form-item label="列表名称" prop="groupMenu">
         <el-input v-model="form.groupMenu"></el-input>
       </el-form-item>
     </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">Cancel</el-button>
        <el-button @click="resetForm">重置</el-button>

        <el-button type="primary" @click="save"
        >确定</el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog  :visible.sync="dialogVisible2"  title="加入组群" width="20%">
     <el-form  :model="form2" label-width="80px"
      ref="ruleGroupForm2"   :rules="rules2"
     >
       <el-form-item label="群id编号" prop="groupId">
         <el-input v-model="form2.groupId" ></el-input>
         <!-- <el-input v-model="form2.userid" disabled></el-input> -->
          </el-form-item>
     </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">Cancel</el-button>
        <el-button type="primary" @click="join"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>

    </div>
    </div>
    </div>
</template>

<script>
import { getJoinMenu, addGroup, getGroupAll, ChoseJoingroup, JoinGroupInfo } from '@/api/newGroup'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      path: this.$route.path,
      dialogVisible1: false,
      dialogVisible2: false,
      groupMenu: '',
      groupData: '',
      form: {
        groupLeader: '',
        groupId: '',
        groupMenu: ''
      },
      form2: {
        groupId: '',
        userId: ''
      },
      // 传进去的数据名称要跟实体层名称一一对应！！！！！！！！！！！！！！
      rules: {
        groupId: [
          { required: true, message: '请输入群id号', trigger: 'blur' },
          {
            min: 4,
            max: 15,
            message: '长度在 4 到 15 个字符',
            trigger: 'blur'
          }
        ],
        groupMenu: [
          { required: true, message: '请输入群组名', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '长度在 6 到 20 个字符',
            trigger: 'blur'
          }
        ]
      },
      rules2: {
        groupId: [
          { required: true, message: '请输入群id号', trigger: 'blur' },
          {
            min: 4,
            max: 15,
            message: '长度在 4 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    getMenus () {
      getGroupAll(this.user.username).then(response => {
        const { data } = response
        this.groupMenu = data
        console.log(this.groupMenu)
      })
      getJoinMenu(this.user.id).then(res => {
        const { data } = res
        this.groupData = data
        console.log(this.groupData)
      })
    },
    dialogAdd () {
      this.dialogVisible1 = true
      this.form.groupLeader = this.user.username
    },
    dialogJoin () {
      this.dialogVisible2 = true
    },
    resetForm () {
      this.$refs.ruleGroupForm.resetFields()
    },
    save () {
      this.$refs.ruleGroupForm.validate((valid) => {
        if (valid) {
          try {
            addGroup(this.form).then(res =>
              this.$message.success('添加成功')
            )
          } catch (e) {
            this.$buefy.toast.open({
              message: `创建失败. ${e}`,
              type: 'is-danger'
            })
          }
          this.getMenus()
          // window.location.reload()
        } else {
          return false
        }
      })
    },

    join () {
      // console.log(this.form2)
      this.$refs.ruleGroupForm2.validate((valid2) => {
        if (valid2) {
          try {
            ChoseJoingroup(this.form2).then(res => {
              if (res) {
                // console.log('有数据')
                JoinGroupInfo(this.form2).then(res =>
                  this.$message.success('加入成功')
                )
              }
            })
          } catch (e) {
            this.$buefy.toast.open({
              message: `加入失败. ${e}`,
              type: 'is-danger'
            })
          }
          // window.location.reload()
          this.getMenus()
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.form2.userId = this.user.id
    this.form2.groupLeader = this.user.username
    console.log(this.user.id)
    this.getMenus()
  },
  components: {
    // SetGroup
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted () {}
}

</script>

<style lang="less" scoped>
.top1{
    // min-height: calc(100vh - 230px);
    min-height: 80vh;
}
.top2{
    min-height: 80vh;
}
.Amain{
  border: 2px solid #545c64;
  border-left: none;
  background-image: url(https://img.zcool.cn/community/015b1456cd26db32f875520f3f7a84.jpg@1280w_1l_2o_100sh.jpg);
  // opacity: 0.6;
  padding: 0;
  margin: 0;
}
.el-menu {
  border-right: 0px;

}
.home-container{
  height:80vh;
  background-color: #545c64;
}
</style>
